<template>
    <div class="app-container">
      <div style="padding: 5px 0px">
        <toolbar
          :table="$refs.table"
          :moduleCode="$enums.moduleType.currency.value"
          @add="handleEdit"
          @delete="handleDelete"
          @refresh="handleRefresh"
        >
        </toolbar>
      </div>
      <div>
        <el-table
          :data="list"
          border
          fit
          highlight-current-row
          ref="table"
          @cell-dblclick="hanldeDbClick"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="产品名称">
            <template slot-scope="scope">
              {{ scope.row.productName }}
            </template>
          </el-table-column>
          <el-table-column label="计价单位">
            <template slot-scope="scope">
              {{ scope.row.basicUnitName }}
            </template>
          </el-table-column>
          <el-table-column label="辅助单位">
            <template slot-scope="scope">
              {{ scope.row.otherUnitName }}
            </template>
          </el-table-column>
          <el-table-column label="换算率">
            <template slot-scope="scope">
              {{ scope.row.conversionRate }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.activated == false"
                >已禁用</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleEdit(scope.row.id)"
                >{{ $t("common.edit") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="float: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page.sync="filter.pageIndex"
          :page-sizes="[10, 20, 50, 100, 200, 500]"
          :page-size.sync="filter.pageSize"
          :prev-click="handlePrePage"
          :next-click="handleNextPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-drawer direction="rtl" :visible.sync="editDrawer" :with-header="false">
        <div v-if="editDrawer">
          <edit :id.sync="currentId" @refresh="hanldeEditRefresh"></edit>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import toolbar from "@/components/Bar/toolbar.vue";
  import edit from "./edit.vue";
  import { getProductAuxiliaryUnits, deleteProductAuxiliaryUnit } from "@/api/product";
  export default {
    components: {
      toolbar,
      edit,
    },
    data() {
      return {
        list: null,
        filter: {
          pageIndex: 1,
          pageSize: 10,
          keyword: "",
          activated: null,
        },
        editDrawer: false,
        currentId: "",
        total: 0,
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        getProductAuxiliaryUnits(this.filter).then((res) => {
          res = res || { totalCount: 0, items: [] };
          this.total = res.totalCount;
          this.list = res.items;
        });
      },
      handlePageChange(pageIndex) {
        this.filter.pageIndex = pageIndex;
        this.getData();
      },
      handleSizeChange(pageSize) {
        this.filter.pageSize = pageSize;
        this.getData();
      },
      handlePrePage(currentPageIndex) {
        this.filter.pageIndex = currentPageIndex - 1;
      },
      handleNextPage(currentPageIndex) {
        this.filter.pageIndex = currentPageIndex + 1;
      },
      handleEdit(id) {
        this.editDrawer = true;
        this.currentId = id;
      },
      handleDelete({ ids }) {
        if (!ids || ids.length == 0) return;
        for (let i = 0; i < ids.length; i++) {
          deleteProductAuxiliaryUnit(ids[i]).then((res) => {
            if (i == ids.length - 1) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                position: "bottom-right",
              });
              this.getData();
            }
          });
        }
      },
      handleRefresh() {
        this.pageIndex = 1;
        this.pageSize = 10;
        this.getData();
      },
      hanldeEditRefresh() {
        this.editDrawer = false;
        this.getData();
      },
      hanldeDbClick(row) {
        this.currentId = row.id;
        this.editDrawer = true;
      },
    },
    computed: {},
  };
  </script>
  